<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Enforcing DataTypes</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Enforcing DataTypes</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>DataSchema supports a <code>parser</code> property that enforces type conversion on data as the schema is being applied.  The <code>parser</code> property can point to one of the following types of parsing functions:</p>

    <ul>
        <li>A DataType subclass parse function, like <code>Y.DataType.Number.parse</code></li>
        <li>A registered shortcut to a DataType subclass parse function, like <code>"number"</code></li>
        <li>A custom function</li>
    </ul>
</div>

<div class="example yui3-skin-sam">
    <style scoped>
/* custom styles for this example */
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
</style>

<form id="demo">
    <h4>Basic example</h4>
    <h6>Data</h6>
    <pre>
{
    "results":[
        {"string":"aardvark", "number":"1", "date":"Jan 1, 2001"},
        {"string":"bat", "number":"2", "date":"Feb 2, 2002"},
        {"string":"camel", "number":"3", "date":"March 3, 2003"}
    ]
}
    </pre>

    <h6>Schema</h6>
    <pre>
{
    resultListLocator: "results",
    resultFields: [
        "string", // needs no parsing
        {key:"number", parser: "number"}, // point to built-in shortcut
        {key:"date", parser: Y.DataType.Date.parse}] // point to function
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_parsing" value="Apply schema =>">
    <div id="demo_output_parsing" class="output"></div>

</form>

<script>
YUI().use("dump", "node", "datatype", "dataschema", function (Y) {
    Y.on("click", function(e){
        var data_in = {
                "results":[
                    {"string":"aardvark", "number":"1", "date":"Jan 1, 2001"},
                    {"string":"bat", "number":"2", "date":"Feb 2, 2002"},
                    {"string":"camel", "number":"3", "date":"March 3, 2003"}
                ]
            },
            schema = {
                resultListLocator: "results",
                resultFields: [
                    "string", // needs no parsing
                    {key:"number", parser: "number"}, // point parser to built-in function shortcut
                    {key:"date", parser: Y.DataType.Date.parse}] // point parser to built-in function
            },
            data_out = Y.DataSchema.JSON.apply(schema, data_in).results,
            output = [],
            result;

        for(var i=0; i<data_out.length; i++) {
            result = data_out[i];
            output.push("<p>string: " + result.string + " [" + Y.Lang.type(result.string) + "]" +
                ", number: " + result.number + " [" + Y.Lang.type(result.number) + "]" +
                ", date: " + result.date + " [" + Y.Lang.type(result.date) + "]</p>");
        }
        output = output.join("");

        Y.one("#demo_output_parsing").setContent(output);
    }, "#demo_apply_parsing");
});
</script>

</div>

<p>Use the <code>parser</code> property in your schema's <code>resultFields</code> definition to point to a parsing function. Parsing your data in this manner is essential if your numerical or date data comes over the wire as JSON, since all the values will be strings.</p>

<pre class="code prettyprint">YUI().use(&quot;datatype&quot;, &quot;dataschema&quot;, function(Y) {
    var data_in = {
            &quot;results&quot;:[
                {&quot;string&quot;:&quot;aardvark&quot;, &quot;number&quot;:&quot;1&quot;, &quot;date&quot;:&quot;Jan 1, 2001&quot;},
                {&quot;string&quot;:&quot;bat&quot;, &quot;number&quot;:&quot;2&quot;, &quot;date&quot;:&quot;Feb 2, 2002&quot;},
                {&quot;string&quot;:&quot;camel&quot;, &quot;number&quot;:&quot;3&quot;, &quot;date&quot;:&quot;March 3, 2003&quot;}
            ]
        },
        schema = {
            resultListLocator: &quot;results&quot;,
            resultFields: [
                &#x2F;&#x2F; needs no parsing
                &quot;string&quot;,
                &#x2F;&#x2F; point parser to built-in function shortcut
                {key:&quot;number&quot;, parser: &quot;number&quot;},
                &#x2F;&#x2F; point parser to built-in function
                {key:&quot;date&quot;, parser: Y.DataType.Date.parse}]
        },
        data_out = Y.DataSchema.JSON.apply(schema, data_in).results;
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Schema parsing a JavaScript array.">
                                        <a href="dataschema-array.html">DataSchema.Array</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing JSON data.">
                                        <a href="dataschema-json.html">DataSchema.JSON</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing XML data.">
                                        <a href="dataschema-xml.html">DataSchema.XML for XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing data held in TABLE elements.">
                                        <a href="dataschema-table.html">DataSchema.XML for HTML Tables</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing delimited plain-text data.">
                                        <a href="dataschema-text.html">DataSchema.Text</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into specified types as the schema is being applied.">
                                        <a href="dataschema-parsing.html">Enforcing DataTypes</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.">
                                        <a href="../datasource/datasource-local.html">DataSource.Local</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.">
                                        <a href="../datasource/datasource-get.html">DataSource.Get</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility.">
                                        <a href="../datasource/datasource-io.html">DataSource.IO</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms">
                                        <a href="../datasource/datasource-function.html">DataSource.Function</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
                                        <a href="../datasource/datasource-caching.html">DataSource with Caching</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
                                        <a href="../datasource/datasource-offlinecache.html">DataSource with Offline Cache</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
